<template>
<div @click="pathpush">
  <div class="detailItem">
      <div class="imgparent">
        <img :src="detailitem.img" @error="imgError(detailitem)" style="width: 100%;height: 27.78vw">
        <div class="bottom">
          <div class="iconfont iconbofangliang"><span class="viedo">4396</span></div>
          <div class="iconfont iconpinglun"><span class="comment">{{!detailitem.commentlen?66:detailitem.commentlen}}</span></div>
        </div>
        </div>
      <p>{{detailitem.name | ellipsis}}</p>
  </div>
</div>
</template>

<script>
import '@/iconfont/iconfont.css'
export default {
  name: "Detail",
  props:['detailitem'],
  methods:{
    imgError(detailitem){
      detailitem.img= require('@/assets/logo.png');
    },
    pathpush(){
      if(this.$route.path != '/article/'+ this.detailitem.id+'')
      this.$router.push('/article/'+ this.detailitem.id+'')
    }
  },
  filters: {
    ellipsis (value) {
      let len=value.length;
      if (!value) return ''
      if (value.length > 20) {
        return value.substring(0,10) + '......' +value.substring(len-8,len)
      }
      return value
    }
  },

}
</script>

<style scoped lang="less">
.detailitem{
  p{
    font-size: 3.33vw;
  }
  .imgparent{
    position: relative;
    .bottom{
      padding: 0vw 2.22vw;
      position: absolute;
      margin-bottom: 1.39vw;
      bottom: 0vw;
      color: white;
      justify-content: space-between;
      left: 0;
      right: 0;
      display: flex;
      background: linear-gradient(0deg,rgba(0,0,0,0.85),transparent);
    }
  }
}
</style>
